<template>
	<div class="sec-top">
		<a class="btn btn-sm btn-primary" v-link="{path: '/'}">返回</a>
		<button class="btn btn-sm btn-primary" @click = "newItem({type: 0}, '新增子项')">新增子项</button>
	</div>
	<table class="table table-bordered table-hover">
		<caption>子项列表</caption>
		<thead>
			<tr>
				<th>子项id</th>
				<th>分类id</th>
				<th>产品id</th>
				<th>内容1</th>
				<th>内容2</th>
				<th>内容3</th>
				<th class="col-xs-2">图片</th>
				<th>产品名称</th>
				<th>产品类型</th>
        <th>排序</th>
				<th></th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="item in cList">
				<td>{{item.itemId}}</td>
				<td>{{item.classifyId}}</td>
				<td>{{item.productId}}</td>
				<td>{{item.data1}}</td>
				<td>{{item.data2}}</td>
				<td>{{item.data3}}</td>
        <td><img style="display: block;max-width: 100%;" :src="item.picUrl"></td>
				<td>{{item.name}}</td>
				<td>
					<span v-if=" +item.type === 0 ">组合</span>
					<span v-if=" +item.type === 1 ">迷你组合</span>
					<span v-if=" +item.type === 2 ">港股组合</span>
					<span v-if=" +item.type === 10 ">网页跳转</span>
					<span v-if=" +item.type === 11 ">小金对话页面</span>
				</td>
				<td class="text-right col-nowrap">
					<button class="btn btn-sm btn-success" v-if=" $index > 0 " @click="swap(item.itemId, cList[$index - 1].itemId)">上移</button>
					<button class="btn btn-sm btn-success" v-if=" $index < cList.length - 1" @click="swap(item.itemId, cList[$index + 1].itemId)">下移</button>
					<button class="btn btn-sm" v-if=" $index >= cList.length - 1 " :style="{ opacity: 0, 'pointer-events': 'none' }">占位</button>
				</td>
				<td class="text-right">
          <button class="btn btn-sm btn-primary" @click="newItem(item,'修改子项')">修改</button>
          <button class="btn btn-sm btn-danger" @click="deleteItem(item.itemId)">删除</button>
				</td>
			</tr>
		</tbody>
	</table>
	<vue-pages :pages.sync="pages" :get-list="getList"></vue-pages>
	<item-new :show-item-new.sync="showItemNew" :it.sync="it" :title= "title"></item-new>
</template>

<script type="text/javascript" src="./item-list.js"></script>
